<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图</title>
		<link rel="shortcut icon" href="img/favicon.ico">
		<link rel="stylesheet" href="https://unpkg.com/aos@2.3.1/dist/aos.css" />
		<style type="text/css">
			* {
				margin: 0 auto;
				padding: 0;
			}

			div {
				width: 1000px;
				height: 500px;
				border: 2px solid;
				background-image: url("img/轮播图/1.jpg");
				background-repeat: no-repeat;
				background-size: 1000px 500px;
				/* step-start */
				/* animation: img 20s linear infinite; */
			}

			ul {
				/* background-color: rebeccapurple; */
				width: 150px;
				/* 实现相对定位 */
				position: relative;
				/* 配合偏移量 top bottom left right */
				top: 450px;
				/* 弹性盒子 */
				display: flex;
			}

			ul::after {
				content: "";
				display: block;
				clear: both;
			}

			li {
				float: left;
				width: 20px;
				height: 20px;
				list-style: none;
				background-color: black;
				color: white;
				border-radius: 50%;
				text-align: center;
				/* margin-right: 10px; */

			}

			li:hover {
				background-color: red;
				cursor: pointer;
			}

			@keyframes img {
				20% {
					background-image: url("img/轮播图/2.jpg");
				}

				40% {
					background-image: url("img/轮播图/3.jpg");
				}

				60% {
					background-image: url("img/轮播图/4.jpg");
				}

				80% {
					background-image: url("img/轮播图/5.jpg");
				}

				100% {
					background-image: url("img/轮播图/1.jpg");
				}
			}
		</style>
	</head>
	<body>
		<div id="pic" data-aos="zoom-out-down">
			<ul>
				<li onclick="change(1)">1</li>
				<li onclick="change(2)">2</li>
				<li onclick="change(3)">3</li>
				<li onclick="change(4)">4</li>
				<li onclick="change(5)">5</li>
			</ul>
		</div>


		<script>
			function change(num) {
				// alert(num);
				switch (num) {
					case 1:
						document.getElementById("pic").style.backgroundImage = "url('img/轮播图/1.jpg')"
						break;
					case 2:
						document.getElementById("pic").style.backgroundImage = "url('img/轮播图/2.jpg')"
						break;
					case 3:
						document.getElementById("pic").style.backgroundImage = "url('img/轮播图/3.jpg')"
						break;
					case 4:
						document.getElementById("pic").style.backgroundImage = "url('img/轮播图/4.jpg')"
						break;
					case 5:
						document.getElementById("pic").style.backgroundImage = "url('img/轮播图/5.jpg')"
						break;
				}
			}
		</script>



		<!-- AOS js -->
		<!-- 淡入淡出插件 -->
		<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
		<script>
			AOS.init({
				offset: 1,
				delay: 0,
				duration: 1000
			});
		</script>
	</body>
</html>
